<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
    <script src="./node_modules/loadsh/lodash.min.js"></script>
    <link rel="stylesheet" href="./src/asset/index.css">
</head>
<body>
    <div id="app">
         <div class="container" >

      <!-- 上面搜索部分 -->
      <div class="search">
        <div class="title">
          <p>综合</p>
          <p>定位</p>
        </div>
        <div class="types">
          <div class="type-list" v-for="(value,index) in typelist" :key="value">
            <div class="radio" v-for="item in value" @click="changeType(index,item.value)"
            :class='{checked:query.value==item.value}'>{{item.name}}</div>
            <!-- <div class="radio" @click="changeType('zonghe',11)"
            :class='{checked:query.value==11}'>新手推荐</div> -->
          </div>
          <!-- <div class="type-list">
            <div class="radio " @click="changeType('dingwei',0)"
            :class='{checked:query.value==0}'>全部</div>
            <div class="radio" @click="changeType('dingwei',3)"
            :class='{checked:query.value==3}'>坦克</div>
            <div class="radio" @click="changeType('dingwei',1)"
            :class='{checked:query.value==1}'>战士</div>
            <div class="radio" @click="changeType('dingwei',4)"
            :class='{checked:query.value==4}'>刺客</div>
            <div class="radio" @click="changeType('dingwei',2)"
            :class='{checked:query.value==2}'>法师</div>
            <div class="radio" @click="changeType('dingwei',5)"
            :class='{checked:query.value==5}'>射手</div>
            <div class="radio" @click="changeType('dingwei',6)"
            :class='{checked:query.value==6}'>辅助</div>
          </div> -->
        </div>
        <div class="keyword">
          <div class="input">
            <input type="text" placeholder="请输入你要搜索的英雄名" 
            :value="keyword"
            @input="changeKeyword"/>
          </div>
        </div>
      </div>

      <!-- 下面列表展示部分 -->
      <ul class="list">
        <li v-for="hero in filterHeross" :key="hero.ename">
          <a :href="`https://pvp.qq.com/web201605/herodetail/${ hero.ename }.shtml`" target="_blank">
                <img :src="`https://game.gtimg.cn/images/yxzj/img201606/heroimg/${ hero.ename }/${ hero.ename }.jpg`"/>
                <span v-html="hero.cname"></span>
          </a>
        </li>
      </ul>
    </div>
    </div>
   
    <script src="./src/js/index.js"></script>
</body>
</html>